{% load static %}
{% load route %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ course_object.title }} - 5xClass源代码官网</title>
    <link rel="shortcut icon" href="{% static 'images/icon32.png' %}" type="image/x-icon">
    <link rel="stylesheet"
          href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css"/>
    <link rel="stylesheet" href="{% static 'css/play.css' %}">
    <style>
        .video-box .nav-bar .column .chapter-box .chapter ul a:focus {
            outline: 0;
        }
    </style>
</head>
<body>
<div class="video-box">
    <div class="video-left">
        <div class="section-number">
            <a class="back" href="{% gen_back_url request 'index' %}">
                <img src="//hcdn2.luffycity.com/media/frontend/activity/back_1564141039.4734588.svg">返回
            </a>
            {% if instance %}
                <h1>正在播放：{{ instance.title }}</h1>
            {% else %}
                <h1>无播放视频</h1>
            {% endif %}

        </div>
        <div class="play-box">
            {% if vid %}
                <div id="J_prismPlayer" style="height: 100%;width: 100%"></div>
            {% endif %}
        </div>
    </div>
    <div class="nav-bar">
        <div class="column">
            <div class="top-menu">
                <div class="section-name">
                    <p class="name">{{ course_object.title }}</p>
                    <p class="num">共17个课时<span>／已学习4个</span></p>
                    <div>
                        <p class="item">模块总时长：{{ total_duration_string }}</p>
                        <p class="item">
                            <a href="https://5x-class.feishu.cn/docx/Pxeed79Hbons8QxBam6crmBAnxc?from=from_copylink"
                               target="_blank"
                               title="点击下载" download="">课件下载</a>
                        </p>

                    </div>
                </div>

                <div class="switch-list">
                    <span class="active-tab">课程大纲</span>
                </div>

            </div>
            <div class="chapter-box">
                <ul>
                    {% for chapter, video_list in play_dict.items %}
                        <li class="chapter">
                            <div class="chapter-title">{{ chapter }}</div>
                            <ul>
                                {% for item  in video_list %}
                                    <a id="v{{ item.id }}" href="{% gen_change_url request 'play' cid=course_object.id video_id=item.id %}">
                                        <li>
                                            <div class="section">
                                                <section>
                                                    <div class="status">
                                                        <p class="{% if instance.id == item.id %}played{% endif %}"></p>
                                                    </div>
                                                    <h5 class="section-number">{{ item.title }}</h5>
                                                </section>
                                                <section>
                                                    <span class="section-time">{{ item.duration }}</span>
                                                    <img src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
                                                         class="play2">
                                                </section>
                                            </div>

                                        </li>
                                    </a>

                                {% endfor %}
                            </ul>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script charset="utf-8" type="text/javascript"
        src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script>
<script type="text/javascript">
    $(function () {
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            autoplay: false,
            width: '100%',
            vid: '{{ vid }}',
            playauth: '{{ play_auth }}',
            encryptType: 1
        }, function (player) {
            console.log('The player is created.')
        });
    })
</script>
</body>
</html>